<template>
  <div v-if="t !== '2'">
    <div class="w-full flex justify-between items-center px-4 py-2">
      <el-input v-model="inputText" @keyup="updateChildValue" style="width: 100%; text-align: center" size="large"
        placeholder="请在这里输入标题">
      </el-input>
    </div>
    <div v-if="mode === 'v1'">
      <el-card>
        <!-- {{ list.mdata }} -->
        <!-- <VueDraggable ref="el" v-model="list.mdata" v-if="list.mdata.length > 0" :sort="true" animation="150"
        ghostClass="ghost" group="people1" itemKey="value"> -->
        <!-- <draggable v-if="list.mdata.length > 0" v-model="list.mdata" @chang="change2" @start="start" @end="end"
        :move="move"> -->

        <div v-if="list.mdata.length > 0">
          <el-tag type="info" class="">媒体文件</el-tag>
          <div v-for="(item, index) in list.mdata" :key="item.value" class="mt-4 " draggable="true"
            @dragstart="dragstart($event, index)" @dragenter="dragenter($event, index)" @dragend="dragend"
            @dragover="dragover">

            <div class="bg-white border-4 border-gary rounded-lg min-h-40"
              style="position: relative; display: flex; align-items: center">
              <el-tag type="primary" class="absolute right-2 top-2">{{ item.key }}</el-tag>

              <div v-if="item.key === '文本'" class="p-2 m-2 float-left pl-10 w-120" :class="item.center">

                <el-input v-model="item.value" type="textarea" placeholder="" class=" h-30" rows="5"></el-input>
              </div>
              <div v-else-if="item.key === '图片'" class="p-2 m-2 float-left pl-10">
                <img :src="item.value" class="w-1/3 aspect-16/9"
                  style="width: 60%;max-height: 300px;object-fit: cover;border-radius: 16px;" />
              </div>
              <div v-else-if="item.key === '滚动'" class="p-2 m-2 float-left">
                <VueDraggable v-model="list.mdata[index].value" animation="150" ghostClass="ghost" group="people2">
                  <div v-for="(item2, index2) in item.value" :key="item2"
                    class="float-left w-40 aspect-16/9 mr-2 mb-2 p-4"
                    style="position: relative; display: flex; align-items: center">
                    <div class="absolute right-2 top-2 bg-white" style="border-radius: 50%"
                      @click="removeItemById2(item2, index, index2)">
                      <Close style="width: 1em; height: 1em; color: red" />
                    </div>
                    <img :src="item2" mode="widthFix" class="h-30 aspect-16/9" />
                  </div>
                </VueDraggable>
              </div>
              <div v-else-if="item.key === '视频'" class="p-2 m-2 float-left pl-10">
                <video :src="item.value" controls class="w-1/3 aspect-16-9" style="border-radius: 16px;"></video>
              </div>
              <div v-else-if="item.key === '音频'" class="p-2 m-2 float-left pl-10">
                <audio :src="item.value" mode="widthFix" controls
                  style="width: 100%; height: auto; margin: 0 auto"></audio>
              </div>
              <div v-else-if="item.key === '标题'" class="p-2 m-2 float-left pl-10">
                <div :class="`title  title${item.index}`">
                  <el-input class="t" v-model="item.value" placeholder="请输入内容" :data-text="item.value" border="none"
                    @change="change"></el-input>
                </div>
              </div>
              <div v-else-if="item.key === '分割线'" class="p-2 m-2 float-left pl-10">
                <hr :class="`${item.value} w-80`" />
              </div>

              <div v-else-if="item.key === '文件'" class="p-2 m-2 border-2 float-left ml-10"
                style="width: 400px; height: 120px">
                <el-row custom-style="margin-bottom: 10px">
                  <el-col span="4">
                    <img :src="getSettingbyKey('文档图标')" style="width: 80px; height: 80px; margin: 10px"
                      mode="scaleToFill" />
                  </el-col>
                  <el-col span="8">
                    <div class="mt-4 ml-2 w-40" style="word-break: break-all; word-wrap: break-word">{{ item.name }}
                    </div>
                    <div class="mt-4 ml-2 font-100 text-yellow text-left">
                      {{ item.size }}
                    </div>
                  </el-col>
                </el-row>
              </div>

              <div class="absolute right-2 bottom-2">
                <div class="float-left">
                  <el-select v-if="item.key === '图片'" class="" v-model="item.mode" placeholder="布局"
                    style="width: 120px; height: 32px">
                    <el-option label="留白" value="aspectFill" />
                    <el-option label="撑满" value="widthFix" />
                  </el-select>
                  <el-select v-if="item.key === '视频'" class="" v-model="item.mode" placeholder="布局"
                    style="width: 120px; height: 32px">
                    <el-option label="正常视频" value="aspect-16/9" />
                    <el-option label="竖屏视频" value="aspect-9/16" />
                  </el-select>
                  <el-select class="ml-2" v-if="item.key === '视频' || item.key === '图片'" v-model="item.grid"
                    placeholder="布局" style="width: 120px; height: 32px" @change="change(index)">
                    <el-option v-for="item2 in stylelist" :key="item2.name" :label="item2.name" :value="item2.value" />
                  </el-select>
                  <el-button v-if="item.key !== '文本' && item.key !== '标题' && item.key !== '分割线'" class="ml-2"
                    @click="chooseFile(index, item.key)">
                    <text v-if="item.key === '滚动'">添加</text>
                    <text v-else>更换</text>
                  </el-button>
                  <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
                  <el-button class="ml-2" type="danger" @click="removeItemById(item)">删除</el-button>
                </div>

              </div>

            </div>
            <el-input v-model="item.css" placeholder="" class="mt-2"></el-input>
          </div>
        </div>
        <!-- </VueDraggable> -->
        <!-- </draggable> -->
        <div v-if="list.mdata.length === 0" class="text-center text-gray-400">[媒体操作区域]</div>

      </el-card>
      <el-card class="mt-4">
        <div v-if="list.fdata.length > 0">
          <el-tag type="info" class="">表单区域</el-tag>
          <div v-for="(item, index) in list.fdata" :key="index" class="mt-4" draggable="true"
            @dragstart="dragstart2($event, index)" @dragenter="dragenter2($event, index)" @dragend="dragend2"
            @dragover="dragover2">

            <div class="bg-white border-4 border-gary rounded-lg min-h-40"
              style="position: relative; align-items: center">
              <div class="name p-2">
                <el-input class="float-left" v-model="item.item.name" style="width: 240px"
                  input-style="text-align:left;" placeholder="请输入标题" />
                <div class="float-left">
                  <el-checkbox class="float-left" v-model="item.item.setting" label="必填" size="large" />
                  <div class="float-left ml-4" v-if="item.item.title === '日期'">
                    <el-checkbox v-model="item.item.setting.autodate" @change="cdate(index)" label="自动填入当前日期"
                      size="large" />
                  </div>
                  <div class="float-left ml-4" v-if="item.item.title === '时间'">
                    <el-checkbox v-model="item.item.setting.autotime" @change="ctime(index)" label="自动填入当前时间"
                      size="large" />
                  </div>
                </div>
              </div>
              <div class="name p-2 text-sm text-gray-400" style="clear: both">
                <el-input v-model="item.item.instruction" style="width: 240px; text-align: left"
                  placeholder="请输入说明文字" />
              </div>
              <div v-if="item.item.title === '单行文本'" class="p-2">
                <el-input style="width: 240px; border: 0" placeholder="请输入内容" />
              </div>
              <div v-else-if="item.item.title === '多行文本'" class="p-2">
                <el-input style="width: 440px" :rows="4" type="textarea" placeholder="请输入内容" />
              </div>
              <div v-else-if="item.item.title === '数字'" class="p-2">
                <el-input class="SZ" style="width: 240px" placeholder="请输入数字">
                  <template #append>
                    <el-input style="width: 50px" v-model="item.item.unit" placeholder="单位"></el-input>
                  </template>
                </el-input>
              </div>
              <div v-else-if="item.item.title === '日期'" class="p-2">
                <el-input style="width: 240px; border: 0" placeholder="请选择日期" />
              </div>
              <div v-else-if="item.item.title === '时间'" class="p-2">
                <el-input style="width: 240px; border: 0" placeholder="请选择时间" />
              </div>
              <div v-else-if="item.item.title === '单选项'" class="p-2">
                <!-- <el-radio-group v-model="radioselect" placement="column">
                <el-radio v-for="o in item.item.radiolist" :key="o" :name="o.name" :label="o.name"
                  custom-style="padding:20rpx"></el-radio>
              </el-radio-group> -->

                <div class="w-140" v-for="(o, i) in item.item.radiolist" :key="o">
                  <el-row :gutter="10">
                    <el-col :span="2">
                      <div style="margin-top: 5px;text-align: center;"><input type="radio" style="margin: 0 auto;"
                          :name="'r' + index" @change="radioOptionChange(index, i)" />
                      </div>
                    </el-col>
                    <el-col :span="22"><el-input placeholder="请输入内容" v-model="o.name">
                        <template #append>
                          <el-button @click="removeradioOption(index, i)">
                            <el-icon>
                              <Close />
                            </el-icon>
                          </el-button>
                        </template>
                      </el-input></el-col>
                  </el-row>
                </div>
                <div class="w-140" style="text-align: center;">
                  <el-button type="info" circle class="mt-4" @click="addradioOption(index)">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-button>
                </div>
              </div>
              <div v-else-if="item.item.title === '多选项'" class="p-2">
                <div class="w-140" v-for="(o, i) in item.item.checkboxlist" :key="o">
                  <el-row :gutter="10">
                    <el-col :span="2">
                      <div style="margin-top: 5px;text-align: center;"><input type="checkbox" style="margin: 0 auto;"
                          :name="'c' + index" @change="checkOptionChange(index, i)" />
                      </div>
                    </el-col>
                    <el-col :span="22"><el-input placeholder="请输入内容" v-model="o.name">
                        <template #append>
                          <el-button @click="removecheckOption(index, i)">
                            <el-icon>
                              <Close />
                            </el-icon>
                          </el-button>
                        </template>
                      </el-input></el-col>
                  </el-row>
                </div>
                <div class="w-140" style="text-align: center;">
                  <el-button type="info" circle class="mt-4" @click="addcheckOption(index)">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-button>
                </div>
              </div>
              <div v-else-if="item.item.title === '表格'" class="p-2">
                <div class="w-140" v-for="(o, i) in item.item.table" :key="o">
                  <el-row :gutter="10">
                    <el-col :span="11">
                      <el-input placeholder="请输入内容" v-model="o.th">

                      </el-input></el-col>
                    <el-col :span="11">
                      <el-input placeholder="请输入内容" v-model="o.td">

                      </el-input></el-col>
                    <el-col :span="2">
                      <el-button @click="removetableOption(index, i)">
                        <el-icon>
                          <Close />
                        </el-icon>
                      </el-button>
                    </el-col>
                  </el-row>
                </div>

                <div class="w-140" style="text-align: center;">
                  <el-button type="info" circle class="mt-4" @click="addtableOption(index)">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-button>
                </div>
              </div>
              <div v-else-if="item.item.title === '自增表格'" class="p-2">
                <div class="w-140" v-for="(o, i) in item.item.table" :key="o">
                  <el-row :gutter="10">
                    <el-col :span="11">
                      <el-input placeholder="请输入内容" v-model="o.th">

                      </el-input></el-col>
                    <el-col :span="11">
                      <el-input placeholder="请输入内容" v-model="o.td">

                      </el-input></el-col>
                    <el-col :span="2">
                      <el-button @click="removetableOption(index, i)">
                        <el-icon>
                          <Close />
                        </el-icon>
                      </el-button>
                    </el-col>
                  </el-row>
                </div>

                <div class="w-140" style="text-align: center;">
                  <el-button type="info" circle class="mt-4" @click="addtableOption(index)">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-button>
                  <el-input v-model="item.item.max" placeholder="最多一共行数" class="mt-4"></el-input>
                </div>
              </div>
              <div v-else-if="item.item.title === '评价'" class="p-2">
                <el-row>

                  <el-col :span="12">
                    一共几颗星
                    <el-input-number v-model="item.item.count" style="max-width: 600px" placeholder="Please input">

                    </el-input-number>
                  </el-col>
                  <el-col :span="12">
                    默认几颗星
                    <el-input-number v-model="item.item.value" style="max-width: 600px" placeholder="Please input">

                    </el-input-number>
                  </el-col>
                </el-row>
                <el-rate v-model="item.item.value" :max="item.item.count" size="large" />
              </div>
              <div v-else-if="item.item.title === '检查项'" class="p-2 text-center">
                <div v-for="(o, i) in item.item.list" :key="o" class="mt-4 w-2/3">
                  <div class="float-left">

                    <el-input v-model="o.title" placeholder="" style="width: 450px"></el-input>
                  </div>
                  <div class="float-right">
                    <el-button @click="removejcOption(index, i)">
                      <el-icon>
                        <Close />
                      </el-icon>
                    </el-button>
                  </div>

                  <div style="clear: both;"></div>
                </div>
                <div class="w-140" style="text-align: center;">
                  <el-button type="info" circle class="mt-4" @click="addjcOption(index)">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-button>
                </div>
              </div>
              <div v-else-if="item.item.title === '手写签名'" class="p-2">
                真实效果请在小程序查看
              </div>
              <div v-else-if="item.item.title === 'NPS量表'" class="p-2 text-center">
                <div v-for="i in 11" :key="i" style="margin: 0 auto;" class="w-2/3">
                  <div class="float-left ml-1 border-1 p-1 px-2"
                    :class="(i - 1) < parseInt(item.item.value) ? 'bg-blue-500 text-white' : ''">
                    {{ i - 1 }}
                  </div>
                </div>
                <div style="clear: both;"></div>
                <div class="mt-4 w-2/3">
                  <div class="float-left  mt-2">
                    <el-input v-model="item.item.min" placeholder="最多一共行数" class="mt-4"></el-input>
                  </div>
                  <div class="float-right mt-2">
                    <el-input v-model="item.item.max" placeholder="最多一共行数" class="mt-4"></el-input>
                  </div>
                  <div style="clear: both;"></div>
                </div>
                <div style="clear: both;"></div>
              </div>
              <div v-else-if="item.item.title === '定位'" class="p-2">
                <el-button :disabled="true">获取当前位置</el-button>
              </div>
              <div v-else-if="item.item.title === '地址'" class="p-2 w-2/3" :style="item.css">
                <el-input v-model="item.item.city" type="text" placeholder="请选择地址" border="surround" :disabled="true"
                  disabled-color="#fff">
                  <template #suffix>
                    <el-button :text="tips" type="warning" size="mini" @click="opencar(index)">
                      选取
                    </el-button>
                  </template>
                </el-input>
                <el-input v-model="item.item.address" type="textarea" rows="5" placeholder=""></el-input>
                <!-- vehicleType  车牌号组件类型 默认挂车trailer  普通车牌号为car -->

              </div>
              <div v-else-if="item.item.title === '名片'" class="p-2 w-100" :style="item.css">
                <div class="rounded-4 shadow-light" style="position: relative; width: 100%; height: 200px;" :style="{
                  'background': `url(${item.item.value.bg})`, 'background-repeat': 'no-repeat',
                  'background-size': '100% 100%'
                }">
                  <div style="position: absolute;top:30px;right: 30px">
                    <img :src="item.item.value.avatar" mode="scaleToFill" class="w-16 h-16 rounded-full" />
                  </div>
                  <div style="position: absolute;top:30px;left: 30px;font-weight: 800;" class="text-2xl">
                    {{ item.item.value.name }}
                  </div>
                  <div style="position: absolute;top:70px;left: 30px" class="text-xl">
                    {{ item.item.value.phone }}
                  </div>
                  <div style="position: absolute;bottom:20px;left: 30px" class="text-lg">
                    {{ item.item.value.companyname }}
                  </div>
                  <div v-if="item.item.value.department" style="position: absolute;top:120px;left: 30px"
                    class="text-sm">
                    {{ item.item.value.department }} | {{ item.item.value.position }}
                  </div>
                </div>
              </div>
              <div v-else-if="item.item.title === '上传图片'" class="p-2">
                <div style="width: 200px; height: 200px; " class="border text-center flex justify-center items-center">
                  <!-- <uv-icon name="photo" color="#c4c6c9" size="28"></uv-icon> -->
                  <el-icon size="58">
                    <PictureFilled />
                  </el-icon>
                </div>
              </div>
              <div v-else-if="item.item.title === '上传视频'" class="p-2">
                <div style="width: 200px; height: 200px; " class="border text-center flex justify-center items-center">
                  <el-icon size="58">
                    <VideoCameraFilled />
                  </el-icon>
                </div>
              </div>
              <div class="absolute right-2 bottom-2">
                <div class="float-left">
                  <el-button class="ml-2" type="primary" @click="duplicateItem(index)">复制</el-button>
                  <el-button class="ml-2" type="danger" @click="removeItemById3(index)">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="text-center text-gray-400">[表单操作区域]</div>
      </el-card>
    </div>
    <div v-else-if="mode === 'v2'">
      <el-card>
        <div v-if="list.length > 0">
          <div v-for="(item, index) in list" :key="item.value" class="mt-4 ">

            <div class="bg-white border-4 border-gary rounded-lg min-h-40"
              style="position: relative; display: flex; align-items: center">
              <el-tag type="primary" class="absolute right-12 top-2">{{ item.key }}</el-tag>

              <div v-if="item.key === '文本'" class="p-2 m-2 float-left pl-10 w-120" :class="item.center">
                <div class="w-2/3" v-html="item.value" @click="openwz(item.value, index)"></div>
                <!-- <el-input v-model="item.value" type="textarea" placeholder="" class=" h-30" rows="5"></el-input> -->
              </div>
              <div v-else-if="item.key === '图片'" class="p-2 m-2 float-left pl-10">
                <img :src="item.value" class="w-1/3 aspect-16/9"
                  style="width: 60%;max-height: 300px;object-fit: cover;border-radius: 16px;" />
              </div>
              <div v-else-if="item.key === '滚动'" class="p-2 m-2 float-left">
                <VueDraggable v-model="list[index].value" animation="150" ghostClass="ghost" group="people2">
                  <div v-for="(item2, index2) in item.value" :key="item2"
                    class="float-left w-40 aspect-16/9 mr-2 mb-2 p-4"
                    style="position: relative; display: flex; align-items: center">
                    <div class="absolute right-2 top-2 bg-white" style="border-radius: 50%"
                      @click="removeItemById2(item2, index, index2)">
                      <Close style="width: 1em; height: 1em; color: red" />
                    </div>
                    <img :src="item2" mode="widthFix" class="h-30 aspect-16/9" />
                  </div>
                </VueDraggable>
              </div>
              <div v-else-if="item.key === '视频'" class="p-2 m-2 float-left pl-10">
                <video :src="item.value" controls class="w-1/3 aspect-16-9" style="border-radius: 16px"></video>
              </div>
              <div v-else-if="item.key === '音频'" class="p-2 m-2 float-left pl-10">
                <audio :src="item.value" mode="widthFix" controls
                  style="width: 100%; height: auto; margin: 0 auto"></audio>
              </div>
              <div v-else-if="item.key === '标题'" class="p-2 m-2 float-left pl-10">
                <div :class="`title  title${item.index}`">
                  <el-input class="t" v-model="item.value" placeholder="请输入内容" :data-text="item.value" border="none"
                    @change="change"></el-input>
                </div>
              </div>
              <div v-else-if="item.key === '分割线'" class="p-2 m-2 float-left pl-10">
                <hr :class="`${item.value} w-80`" />
              </div>

              <div v-else-if="item.key === '文件'" class="p-2 m-2 border-2 float-left ml-10"
                style="width: 400px; height: 120px">
                <el-row custom-style="margin-bottom: 10px">
                  <el-col span="4">
                    <img :src="getSettingbyKey('文档图标')" style="width: 80px; height: 80px; margin: 10px"
                      mode="scaleToFill" />
                  </el-col>
                  <el-col span="8">
                    <div class="mt-4 ml-2 w-40" style="word-break: break-all; word-wrap: break-word">{{ item.name }}
                    </div>
                    <div class="mt-4 ml-2 font-100 text-yellow text-left">
                      {{ item.size }}
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div v-else-if="(item.key === '基础表单' || item.key === '多媒体类' || item.key === '个人信息')"
                class="name p-2 w-full">
                <el-input v-if="item.item.title !== '分组标题'" class="float-left" v-model="item.item.name"
                  style="width: 240px" input-style="text-align:left;" placeholder="请输入标题" />
                <div class="float-left" v-if="item.item.title !== '分组标题'">
                  <el-checkbox class="float-left" v-model="item.item.setting" label="必填" size="large" />
                  <div class="float-left ml-4" v-if="item.item.title === '日期'">
                    <el-checkbox v-model="item.item.setting.autodate" @change="cdate(index)" label="自动填入当前日期"
                      size="large" />
                  </div>
                  <div class="float-left ml-4" v-if="item.item.title === '时间'">
                    <el-checkbox v-model="item.item.setting.autotime" @change="ctime(index)" label="自动填入当前时间"
                      size="large" />
                  </div>
                </div>

                <div v-if="item.item.title !== '分组标题'" class="name p-2 text-sm text-gray-400" style="clear: both">
                  <el-input v-model="item.item.instruction" style="width: 240px; text-align: left"
                    placeholder="请输入说明文字" />
                </div>
                <div v-if="item.item.title === '单行文本'" class="p-2">
                  <el-input style="width: 240px; border: 0" placeholder="请输入内容" />
                </div>
                <div v-else-if="item.item.title === '多行文本'" class="p-2">
                  <el-input style="width: 440px" :rows="4" type="textarea" placeholder="请输入内容" />
                </div>
                <div v-else-if="item.item.title === '数字'" class="p-2">
                  <el-input class="SZ" style="width: 240px" placeholder="请输入数字">
                    <template #append>
                      <el-input style="width: 50px" v-model="item.item.unit" placeholder="单位"></el-input>
                    </template>
                  </el-input>
                </div>
                <div v-else-if="item.item.title === '日期'" class="p-2">
                  <el-input style="width: 240px; border: 0" placeholder="请选择日期" />
                </div>
                <div v-else-if="item.item.title === '时间'" class="p-2">
                  <el-input style="width: 240px; border: 0" placeholder="请选择时间" />
                </div>
                <div v-else-if="item.item.title === '单选项'" class="p-2">
                  <!-- <el-radio-group v-model="radioselect" placement="column">
                <el-radio v-for="o in item.item.radiolist" :key="o" :name="o.name" :label="o.name"
                  custom-style="padding:20rpx"></el-radio>
              </el-radio-group> -->

                  <div class="w-140" v-for="(o, i) in item.item.radiolist" :key="o">
                    <el-row :gutter="10">
                      <el-col :span="2">
                        <div style="margin-top: 5px;text-align: center;"><input type="radio" style="margin: 0 auto;"
                            :name="'r' + index" @change="radioOptionChange(index, i)" />
                        </div>
                      </el-col>
                      <el-col :span="22"><el-input placeholder="请输入内容" v-model="o.name">
                          <template #append>
                            <el-button @click="removeradioOption(index, i)">
                              <el-icon>
                                <Close />
                              </el-icon>
                            </el-button>
                          </template>
                        </el-input></el-col>
                    </el-row>
                  </div>
                  <div class="w-140" style="text-align: center;">
                    <el-button type="info" circle class="mt-4" @click="addradioOption(index)">
                      <el-icon>
                        <Plus />
                      </el-icon>
                    </el-button>
                  </div>
                </div>
                <div v-else-if="item.item.title === '多选项'" class="p-2">
                  <div class="w-140" v-for="(o, i) in item.item.checkboxlist" :key="o">
                    <el-row :gutter="10">
                      <el-col :span="2">
                        <div style="margin-top: 5px;text-align: center;"><input type="checkbox" style="margin: 0 auto;"
                            :name="'c' + index" @change="checkOptionChange(index, i)" />
                        </div>
                      </el-col>
                      <el-col :span="22"><el-input placeholder="请输入内容" v-model="o.name">
                          <template #append>
                            <el-button @click="removecheckOption(index, i)">
                              <el-icon>
                                <Close />
                              </el-icon>
                            </el-button>
                          </template>
                        </el-input></el-col>
                    </el-row>
                  </div>
                  <div class="w-140" style="text-align: center;">
                    <el-button type="info" circle class="mt-4" @click="addcheckOption(index)">
                      <el-icon>
                        <Plus />
                      </el-icon>
                    </el-button>
                  </div>
                </div>
                <div v-else-if="item.item.title === '表格'" class="p-2">
                  <div class="w-140" v-for="(o, i) in item.item.table" :key="o">
                    <el-row :gutter="10">
                      <el-col :span="11">
                        <el-input placeholder="请输入内容" v-model="o.th">

                        </el-input></el-col>
                      <el-col :span="11">
                        <el-input placeholder="请输入内容" v-model="o.td">

                        </el-input></el-col>
                      <el-col :span="2">
                        <el-button @click="removetableOption(index, i)">
                          <el-icon>
                            <Close />
                          </el-icon>
                        </el-button>
                      </el-col>
                    </el-row>
                  </div>

                  <div class="w-140" style="text-align: center;">
                    <el-button type="info" circle class="mt-4" @click="addtableOption(index)">
                      <el-icon>
                        <Plus />
                      </el-icon>
                    </el-button>
                  </div>
                </div>
                <div v-else-if="item.item.title === '自增表格'" class="p-2">
                  <div class="w-140" v-for="(o, i) in item.item.table" :key="o">
                    <el-row :gutter="10">
                      <el-col :span="11">
                        <el-input placeholder="请输入内容" v-model="o.th">

                        </el-input></el-col>
                      <el-col :span="11">
                        <el-input placeholder="请输入内容" v-model="o.td">

                        </el-input></el-col>
                      <el-col :span="2">
                        <el-button @click="removetableOption(index, i)">
                          <el-icon>
                            <Close />
                          </el-icon>
                        </el-button>
                      </el-col>
                    </el-row>
                  </div>

                  <div class="w-140" style="text-align: center;">
                    <el-button type="info" circle class="mt-4" @click="addtableOption(index)">
                      <el-icon>
                        <Plus />
                      </el-icon>
                    </el-button>
                    <el-input v-model="item.item.max" placeholder="最多一共行数" class="mt-4"></el-input>
                  </div>
                </div>
                <div v-else-if="item.item.title === '评价'" class="p-2">
                  <el-row>

                    <el-col :span="12">
                      一共几颗星
                      <el-input-number v-model="item.item.count" style="max-width: 600px" placeholder="Please input">

                      </el-input-number>
                    </el-col>
                    <el-col :span="12">
                      默认几颗星
                      <el-input-number v-model="item.item.value" style="max-width: 600px" placeholder="Please input">

                      </el-input-number>
                    </el-col>
                  </el-row>
                  <el-rate v-model="item.item.value" :max="item.item.count" size="large" />
                </div>
                <div v-else-if="item.item.title === '检查项'" class="p-2 text-center">
                  <div v-for="(o, i) in item.item.list" :key="o" class="mt-4 w-2/3">
                    <div class="float-left">

                      <el-input v-model="o.title" placeholder="" style="width:250px"></el-input>
                    </div>
                    <div class="float-right">
                      <el-button @click="removejcOption(index, i)">
                        <el-icon>
                          <Close />
                        </el-icon>
                      </el-button>
                    </div>

                    <div style="clear: both;"></div>
                  </div>
                  <div class="w-140" style="text-align: center;">
                    <el-button type="info" circle class="mt-4" @click="addjcOption(index)">
                      <el-icon>
                        <Plus />
                      </el-icon>
                    </el-button>
                  </div>
                </div>
                <div v-else-if="item.item.title === '手写签名'" class="p-2">
                  真实效果请在小程序查看
                </div>
                <div v-else-if="item.item.title === 'NPS量表'" class="p-2 text-center w-full">
                  <div v-for="i in 11" :key="i" class="w-2/3 ml-18">
                    <div class="float-left ml-1 border-1 p-1 px-2"
                      :class="(i - 1) < parseInt(item.item.value) ? 'bg-blue-500 text-white' : ''">
                      {{ i - 1 }}
                    </div>
                  </div>
                  <div style="clear: both;"></div>
                  <div class="mt-4 w-2/3">
                    <div class="float-left  mt-2">
                      <el-input v-model="item.item.min" placeholder="最多一共行数" class="mt-4"></el-input>
                    </div>
                    <div class="float-right mt-2">
                      <el-input v-model="item.item.max" placeholder="最多一共行数" class="mt-4"></el-input>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                  <div style="clear: both;"></div>
                </div>
                <div v-else-if="item.item.title === '定位'" class="p-2">
                  <el-button :disabled="true">获取当前位置</el-button>
                </div>
                <div v-else-if="item.item.title === '地址'" class="p-2 w-2/3" :style="item.css">
                  <el-input v-model="item.item.city" type="text" placeholder="请选择地址" border="surround" :disabled="true"
                    disabled-color="#fff">
                    <template #suffix>
                      <el-button :text="tips" type="warning" size="mini" @click="opencar(index)">
                        选取
                      </el-button>
                    </template>
                  </el-input>
                  <el-input v-model="item.item.address" type="textarea" rows="5" placeholder=""></el-input>
                  <!-- vehicleType  车牌号组件类型 默认挂车trailer  普通车牌号为car -->

                </div>
                <div v-else-if="item.item.title === '上传图片'" class="p-2">
                  <div style="width: 200px; height: 200px; "
                    class="border text-center flex justify-center items-center">
                    <!-- <uv-icon name="photo" color="#c4c6c9" size="28"></uv-icon> -->
                    <el-icon size="58">
                      <PictureFilled />
                    </el-icon>
                  </div>
                </div>
                <div v-else-if="item.item.title === '上传视频'" class="p-2">
                  <div style="width: 200px; height: 200px; "
                    class="border text-center flex justify-center items-center">
                    <el-icon size="58">
                      <VideoCameraFilled />
                    </el-icon>
                  </div>
                </div>
                <div v-else-if="item.item.title === '分组标题'" class="p-2 w-1/3">

                  <div class="text-left font-8 pb-2"
                    style="font-size: 20px;font-weight: 800;border-bottom:2px #fcca00 solid">
                    <el-input v-model="item.item.name" style="width: 240px" input-style="text-align:left;"
                      placeholder="请输入标题" />
                  </div>
                  <div class="text-left font-8">
                    <el-input v-model="item.item.instruction" style="width: 240px" input-style="text-align:left;"
                      placeholder="请输入备注" />
                  </div>
                </div>
                <div v-else-if="item.item.title === '名片'" class="p-2 w-100" :style="item.css">
                  <div class="rounded-4 shadow-light" style="position: relative; width: 100%; height: 200px;" :style="{
                    'background': `url(${item.item.value.bg})`, 'background-repeat': 'no-repeat',
                    'background-size': '100% 100%'
                  }">
                    <div style="position: absolute;top:30px;right: 30px">
                      <img :src="item.item.value.avatar" mode="scaleToFill" class="w-16 h-16 rounded-full" />
                    </div>
                    <div style="position: absolute;top:30px;left: 30px;font-weight: 800;" class="text-2xl">
                      {{ item.item.value.name }}
                    </div>
                    <div style="position: absolute;top:70px;left: 30px" class="text-xl">
                      {{ item.item.value.phone }}
                    </div>
                    <div style="position: absolute;bottom:20px;left: 30px" class="text-lg">
                      {{ item.item.value.companyname }}
                    </div>
                    <div v-if="item.item.value.department" style="position: absolute;top:120px;left: 30px"
                      class="text-sm">
                      {{ item.item.value.department }} | {{ item.item.value.position }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="absolute right-12 bottom-2">
                <div class="float-left">

                  <el-select v-if="item.key === '图片'" class="" v-model="item.mode" placeholder="布局"
                    style="width: 120px; height: 32px">
                    <el-option label="留白" value="aspectFill" />
                    <el-option label="撑满" value="widthFix" />
                  </el-select>
                  <el-select v-if="item.key === '视频' || item.key === '图片'" class="ml-2" v-model="item.grid"
                    placeholder="布局" style="width: 120px; height: 32px" @change="change(index)">
                    <el-option v-for="item2 in stylelist" :key="item2.name" :label="item2.name" :value="item2.value" />
                  </el-select>
                  <el-button v-if="item.key === '视频' || item.key === '图片' || item.key === '音频' || item.key === '文件'"
                    class="ml-2" @click="chooseFile(index, item.key)">
                    <text v-if="item.key === '滚动'">添加</text>
                    <text v-else>更换</text>
                  </el-button>
                  <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
                  <el-button class="ml-2" type="danger" @click="removeItemById3(index)">删除</el-button>

                </div>

              </div>
              <div class="absolute right-1 top-1 w-8">
                <div class="h-17 grid place-items-center bg-gray-200" @click="swapWithPrevious(item)">
                  <el-icon :size="20">
                    <Top />
                  </el-icon>
                </div>
                <div class="h-17 grid place-items-center mt-2  bg-gray-200" @click="swapWithNext(item)">
                  <el-icon :size="20">
                    <Bottom />
                  </el-icon>
                </div>
              </div>
            </div>
            <el-input v-model="item.css" placeholder="" class="mt-2"></el-input>
          </div>
        </div>
        <div v-else class="text-center text-gray-400">[设计区域]</div>
      </el-card>
    </div>
  </div>
  <div v-else>
    <el-row>
      <el-col :span="12">
        <div style="position: relative;">
          <img :src="list.card.bg">
          <el-tag type="info" style="position: absolute;top: 10px;left: 10px;">背景</el-tag>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="relative">

          <img :src="list.card.avatar" class="avatar w-1/2" style="margin: 0 auto;" @click="chooseFile2()" />

          <input type="file" ref="fileInput2" style="display: none" @change="handleFileChange2" />
          <el-tag type="info" style="position: absolute;top: 10px;left: 10px;">头像</el-tag>
        </div>
      </el-col>
    </el-row>
    <el-form :model="form" label-width="auto" class="mt-4">
      <el-form-item label="姓名">
        <el-input v-model="list.card.name" />
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model="list.card.phone" />
      </el-form-item>
      <el-form-item label="微信">
        <el-input v-model="list.card.weixin" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="list.card.email" />
      </el-form-item>

      <el-form-item label="公司">
        <el-input v-model="list.card.companyname" />
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model="list.card.department" />
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="list.card.position" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="list.card.address">
          <template #append>
            <el-icon @click="openMapPickPop">
              <MapLocation />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
    </el-form>

  </div>
  <el-dialog v-model="dialogVisible2" width="800" :before-close="handleClose">
    <editor v-model="textarea1" :init="init" :tinymceScriptSrc="tinymceScriptSrc"></editor>
    <!-- <vue3-tinymce v-model="textarea1" :setting="state.setting" /> -->
    <!-- <div>
        <el-input v-model="textarea1" style="width: 100%" type="textarea" rows="8"
          :autosize="{ minRows: 8, maxRows: 20 }" placeholder="请在此处输入文字" />
      </div> -->
    <template #footer>

      <div class="dialog-footer">
        <!-- <el-switch v-model="value" size="large" active-text="居中" inactive-text="居左" class="float-left" /> -->
        <el-button @click="dialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="wz()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import { VueDraggable } from 'vue-draggable-plus';
import _ from 'lodash';
import { getSettingbyKey, getSettingbyincludes } from '@/utils/index.js';
import moment from 'moment';
import { ElMessageBox } from "element-plus";
const mapApiKey = "6FNBZ-W3FKU-IOYVP-47WQW-UFSH2-4CBSI";
const IFRAME_HTML = `<iframe id="mapPage" width="600" height="400" frameborder="0"
              src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${mapApiKey}&referer=myapp"></iframe>`;
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme' // 主题文件
import 'tinymce/icons/default'
import 'tinymce/models/dom'
// tinymce插件可按自己的需要进行导入
import 'tinymce/plugins/accordion' // 列表插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/advlist' // 有序列表插件
import 'tinymce/plugins/autolink' // 当用户输入有效的完整URL时，autolink插件会自动创建超链接。
import 'tinymce/plugins/link' // 链接
import 'tinymce/plugins/autosave' // 定时自动将编辑内容保存到浏览器本地存储中（Local Storage）
import 'tinymce/plugins/autoresize' // 可拉伸宽度
import 'tinymce/plugins/charmap' // 特殊字符
import 'tinymce/plugins/code' // 查看源码
import 'tinymce/plugins/codesample' // 插入代码
import 'tinymce/plugins/directionality' // 文字方向
import 'tinymce/plugins/emoticons' // 表情符号
import 'tinymce/plugins/emoticons/js/emojis'
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/plugins/importcss' //引入自己定义的css文件
import 'tinymce/plugins/insertdatetime' //插入时间日期
import 'tinymce/plugins/nonbreaking' // 空格
import 'tinymce/plugins/pagebreak' //分页
import 'tinymce/plugins/preview' // 预览
import 'tinymce/plugins/quickbars' // 快速工具栏
import 'tinymce/plugins/save' // 保存
import 'tinymce/plugins/searchreplace' //查询替换
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/visualblocks' // 块范围显示

const tinymceScriptSrc = '/tinymce/tinymce.min.js'
const init = {
  height: 400,
  language_url: '/tinymce/langs/zh-Hans.js',
  language: 'zh-Hans',
  skin_url: '/tinymce/skins/ui/oxide', // 皮肤：这里引入的是public下的资源文件
  // skin_url: 'tinymce/skins/ui/oxide-dark',//黑色系
  content_css: '/tinymce/skins/content/default/content.css', //内容区域css样式
  content_style: "p {margin: 5px 0;}",
  plugins: ' accordion lists advlist quickbars autolink link autosave charmap wordcount code codesample directionality emoticons fullscreen image importcss insertdatetime nonbreaking pagebreak preview searchreplace table visualblocks formatpainter kityformula-editor',
  toolbar: ` undo redo  code pastetext formatpainter removeformat fullscreen wordcount  visualblocks |   blocks fontfamily fontsize forecolor backcolor bold italic underline strikethrough lineheight | alignleft alignright aligncenter alignjustify
  outdent indent ltr rtl | bullist numlist | blockquote subscript superscript  table image charmap emoticons hr  pagebreak  | insertdatetime  |  custom-btn`,
  toolbar_mode: 'wrap', // 工具栏模式: floating sliding scrolling wrap
  external_plugins: { // 引入自定义的插件
    'kityformula-editor': '/tinymce/plugins/kityformula-editor/plugin.min.js',
    formatpainter: '/tinymce/plugins/formatpainter/plugin.min.js',
  },
  menubar: true, // 菜单栏
  statusbar: true, // 是否显示底部状态栏
  auto_focus: true, // 自动聚焦
  branding: false, // 默认会在右下角显示Tiny图标
  promotion: false, // 隐藏upgrade按钮
  resize: true, // 改变宽高
  // 快速工具栏配置，需引入插件 quickbars
  quickbars_selection_toolbar: 'bold italic underline strikethrough', // 设置 快速选择 触发提供的工具栏 需引入插件  默认 'alignleft aligncenter alignright' 设置为false禁用
  quickbars_insert_toolbar: 'quickimage quicktable quicklink', // 设置 快速插入 触发提供的工具栏 需引入插件quickbars 默认 quickimage quicktable 设置为false禁用
  quickbars_image_toolbar: 'alignleft aligncenter alignright',
  save_onsavecallback: function () { alert('已保存'); },
  automatic_uploads: false, // 禁止图片自动上传
  font_size_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
  font_family_formats:
    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
  setup: (editor) => {
    console.log(editor);
    editor.ui.registry.addButton("custom-btn", {
      text: "背景段落",
      icon: "ai",
      tooltip: '背景段落',
      onAction: function () {
        uploadImage(editor)
      }
    })
    const onAction = (autocompleteApi, rng, value) => {
      editor.selection.setRng(rng);
      // editor.insertContent(value);
      // contenteditable=false 不可编辑，保证删除时#和内容为一个整体
      editor.insertContent(`<span style="color: blue;" contenteditable="false">#${value}</span><span>&nbsp;</span>`);
      autocompleteApi.hide();
    };

    const getMatchedChars = (pattern) => {
      return specialChars.filter(char => char.text.indexOf(pattern) !== -1);
    };
    /* 自动补全 */
    editor.ui.registry.addAutocompleter('specialchars_cardmenuitems', {
      trigger: '#',
      minChars: 0,
      columns: 1,
      highlightOn: ['char_name'],
      onAction: onAction,
      fetch: (pattern) => {
        return new Promise((resolve) => {
          const results = getMatchedChars(pattern).map(char => ({
            type: 'cardmenuitem',
            value: char.value,
            label: char.text,
            items: [
              {
                type: 'cardcontainer',
                direction: 'vertical',
                items: [
                  {
                    type: 'cardtext',
                    text: char.text,
                    name: 'char_name'
                  },
                  {
                    type: 'cardtext',
                    text: char.value
                  }
                ]
              }
            ]
          }));
          resolve(results);
        });
      }
    });

  },

  // 此处为自定义图片上传处理函数
  images_upload_handler: (blobInfo) => new Promise((resolve, reject) => {
    let file = blobInfo.blob()
    // 调接口
    console.log(file, resolve, reject, '==file')
    // let url = 'blob:http://127.0.0.1:8000/2c6c7bbe-cb9a-481d-acfe-adc00f2866d5'
    // resolve(url)
  }),
  image_advtab: true, // 图片高级功能
  lists_indent_on_tab: true, // 是否按tab键进入新的子列表
  link_context_toolbar: true,
  link_rel_list: [
    { title: 'No Referrer', value: 'noreferrer' },
    { title: 'External Link', value: 'external' }
  ],
  link_target_list: [
    { title: 'None', value: '' },
    { title: 'Same page', value: '_self' },
    { title: 'New page', value: '_blank' },
    { title: 'Parent frame', value: '_parent' }
  ],
  fullscreen_native: true,
  pagebreak_split_block: true,
  table_border_widths: [
    { title: 'small', value: '1px' },
    { title: 'medium', value: '3px' },
    { title: 'large', value: '5px' },
  ],
  table_toolbar: 'tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol tablecellborderwidth tablecellborderstyle',
}
// 上传图片函数
function uploadImage(editor) {
  var fileInput = document.createElement('input');
  fileInput.setAttribute('type', 'file');
  fileInput.setAttribute('accept', 'image/*');
  fileInput.onchange = function (e) {
    var file = e.target.files[0];
    console.log('file', file)
    var reader = new FileReader();

    reader.onload = function (e) {
      var imageUrl = e.target.result;

      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        const imageWidth = img.width;
        const imageHeight = img.height;
        console.log(imageWidth, imageHeight)
        // 将图片URL设置为div的背景
        var div = document.createElement('div');
        div.style.backgroundImage = 'url(' + imageUrl + ')';
        div.style.width = img.width + 'px';
        div.style.height = img.height + 'px';;
        div.style.backgroundSize = 'cover';
        div.style.backgroundRepeat = 'no-repeat'; // 设置背景不重复
        document.body.appendChild(div);
        //let divstr = `<div style="background:url(${imageUrl});width:${img.width};height:${img.height};background-size:cover;background-repeat:no-repeat"></div>`

        // 将div插入到编辑器中
        editor.insertContent(div.outerHTML);
        document.body.removeChild(div);
      };
    };

    reader.readAsDataURL(file);
  };
  fileInput.click();
}
const currentPicked = ref({
  latlng: {},
});

function openMapPickPop($event) {
  if ($event.relatedTarget) return;
  ElMessageBox({
    title: "选择地址",
    message: IFRAME_HTML,
    customClass: "location-picker-box",
    dangerouslyUseHTMLString: true,
    closeOnPressEscape: false,
  })
    .then(() => {
      window.removeEventListener("message", handleMapPickedMessage, false);

      console.log("选择了地图", currentPicked.value);
    })
    .catch(e => {
      if (e != "cancel") throw e;
      window.removeEventListener("message", handleMapPickedMessage, false);
    });

  window.addEventListener("message", handleMapPickedMessage, false);
}
function handleMapPickedMessage(event) {
  /**
   * 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
   */
  let loc = event.data;
  // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
  if (loc && loc.module != "locationPicker") return;
  currentPicked.value = loc;
  console.log(" currentPicked.value ", currentPicked.value);
  console.log('list.value.card', list.value.card)
  list.value.card.address = currentPicked.value.poiname
  list.value.card.longitude = currentPicked.value.latlng.lng
  list.value.card.latitude = currentPicked.value.latlng.lat
  console.log(currentPicked.value.latlng.lng, currentPicked.value.latlng.lat)
}

import {
  fileput,
  type,
  formatBytes,
  beforeUploadVideoOss,
  beforeUploadAuidoOss,
  beforeUploadImageOss,
  beforeUploadIFileOss,
  beforeUploadICarouselOss,
} from '@/utils/ali-oss';
import { ref, reactive, toRefs, defineEmits } from 'vue';
import { useListStore } from '@/stores/list';
import { useRoute, useRouter } from 'vue-router';
const listStore = useListStore();
const list = computed(() => listStore.list);
console.log('list', list);
const route = useRoute();
const t = route.query.t;
const mode = route.query.mode;
console.log('t', t)
const value2 = ref('占满一行');

const dialogVisible2 = ref(false)
const fileData = ref(null);
const fileInput = ref(null);
const fileInput2 = ref(null);
const showToast = inject('$showToast');
const dialogVisible3 = ref(false)
const textarea1 = ref('');
const selecIndex = ref(0)
const stylelist = ref([
  {
    name: '占满整行',
    value: 'w-full'
  },
  {
    name: '两个一行',
    value: 'w-1/2'
  },
  {
    name: '三个一行', // 开启后文字不显示
    value: 'w-1/3'
  },
]);
function a() {
  alert(123);

}
function openwz(value, index) {
  selecIndex.value = index;

  textarea1.value = value;

  dialogVisible2.value = true
}
function wz() {
  if (mode === 'v1') {

    list.value.mdata[selecIndex].value = textarea1.value;
  }
  else if (mode === 'v2') {

    list.value[selecIndex.value].value = textarea1.value;
  }
  dialogVisible2.value = false
}
function swapWithNext(item) {

  const index = list.value.indexOf(item)
  console.log('index', index)
  if (index > -1 && index < list.value.length - 1) {
    // 使用 Vue 提供的方法来保持响应性
    const nextIndexItem = list.value[index + 1]; // 暂存 index + 1 位置的元素
    list.value[index] = nextIndexItem; // 将 item 放到 index 位置
    list.value[index + 1] = item; // 将暂存的元素放到 index + 1 位置
  }
  console.log('list', list.value)
}
function swapWithPrevious(item) {
  const index = list.value.indexOf(item)
  if (index > 0 && index < list.value.length) { // 确保index在第一个和最后一个之间
    // 使用 Vue 提供的方法来保持响应性
    const previousItem = list.value[index - 1]; // 暂存 index - 1 位置的元素
    list.value[index - 1] = item;       // 将 item 放到 index - 1 位置
    list.value[index] = previousItem;           // 将暂存的元素放到 index 位置
  }

}
let dragIndex = 0

function dragstart(e, index) {
  e.stopPropagation()
  dragIndex = index
  setTimeout(() => {
    e.target.classList.add('moveing')
  }, 0)
}
function dragenter(e, index) {
  e.preventDefault()
  console.log(index, dragIndex, dragIndex !== index)
  // 拖拽到原位置时不触发
  if (dragIndex !== index) {

    const source = list.value.mdata[dragIndex];
    list.value.mdata.splice(dragIndex, 1);
    console.log('list.madta1', list.value.mdata)
    list.value.mdata.splice(index, 0, source);
    console.log('list.madta2', list.value.mdata)

    // 更新节点位置
    dragIndex = index
  }
}
function dragover(e) {
  e.preventDefault()
  e.dataTransfer.dropEffect = 'move'
}
function dragend(e) {
  e.target.classList.remove('moveing')
}

let dragIndex2 = 0

function dragstart2(e, index) {
  e.stopPropagation()
  dragIndex2 = index
  setTimeout(() => {
    e.target.classList.add('moveing')
  }, 0)
}
function dragenter2(e, index) {
  e.preventDefault()
  console.log(index, dragIndex2, dragIndex2 !== index)
  // 拖拽到原位置时不触发
  if (dragIndex2 !== index) {

    const source = list.value.fdata[dragIndex];
    list.value.fdata.splice(dragIndex, 1);
    console.log('list.madta1', list.value.fdata)
    list.value.fdata.splice(index, 0, source);
    console.log('list.madta2', list.value.fdata)

    // 更新节点位置
    dragIndex = index
  }
}
function dragover2(e) {
  e.preventDefault()
  e.dataTransfer.dropEffect = 'move'
}
function dragend2(e) {
  e.target.classList.remove('moveing')
}

function addradioOption(index) {

  if (mode === 'v1') {
    const newOption = {
      name: '选项' + (list.value.fdata[index].item.radiolist.length + 1),
      disabled: false,
      isActive: false,
    }
    list.value.fdata[index].item.radiolist.push(newOption)
  }
  else if (mode === 'v2') {
    const newOption = {
      name: '选项' + (list.value[index].item.radiolist.length + 1),
      disabled: false,
      isActive: false,
    }
    list.value[index].item.radiolist.push(newOption)
  }
}
function removeradioOption(index, index2) {
  if (mode === 'v1') {
    list.value.fdata[index].item.radiolist.splice(index2, 1)
  }
  else if (mode === 'v2') {
    list.value[index].item.radiolist.splice(index2, 1)
  }
}
function radioOptionChange(index, index2) {
  if (mode === 'v1') {

    list.value.fdata[index].item.radiolist.forEach(function (radioItem, radioIndex) {
      // 在这里处理每个 radioItem
      console.log(`处理 radiolist 中的第 ${radioIndex} 个元素: `, radioItem);

      list.value.fdata[index].item.radiolist[radioIndex].isActive = false;
    });
    list.value.fdata[index].item.radiolist[index2].isActive = true;
    list.value.fdata[index].item.radiolist[index2].value = list.value.fdata[index].item.radiolist[index2].name
  }
  else if (mode === 'v2') {
    list.value[index].item.radiolist.forEach(function (radioItem, radioIndex) {
      // 在这里处理每个 radioItem
      console.log(`处理 radiolist 中的第 ${radioIndex} 个元素: `, radioItem);

      list.value[index].item.radiolist[radioIndex].isActive = false;
    });
    list.value[index].item.radiolist[index2].isActive = true;
    list.value[index].item.radiolist[index2].value = list.value[index].item.radiolist[index2].name
  }
}

function addcheckOption(index) {

  if (mode === 'v1') {
    const newOption = {
      name: '选项' + (list.value.fdata[index].item.checkboxlist.length + 1),
      disabled: false,
      isActive: false,
    }
    list.value.fdata[index].item.checkboxlist.push(newOption)
  }
  else if (mode === 'v2') {
    const newOption = {
      name: '选项' + (list.value[index].item.checkboxlist.length + 1),
      disabled: false,
      isActive: false,
    }
    list.value[index].item.checkboxlist.push(newOption)
  }
}
function addtableOption(index) {

  if (mode === 'v1') {
    const newOption = {
      th: '标题' + (list.value.fdata[index].item.table.length + 1),
      td: '内容' + (list.value.fdata[index].item.table.length + 1),
    }
    list.value.fdata[index].item.table.push(newOption)
  }
  else if (mode === 'v2') {
    const newOption = {
      th: '标题' + (list.value[index].item.table.length + 1),
      td: '内容' + (list.value[index].item.table.length + 1),
    }
    list.value[index].item.table.push(newOption)
  }
}
function addjcOption(index) {

  if (mode === 'v1') {
    const newOption = {
      title: '标题' + (list.value.fdata[index].item.list.length + 1),

    }
    list.value.fdata[index].item.list.push(newOption)
  }
  else if (mode === 'v2') {
    const newOption = {
      title: '标题' + (list.value[index].item.list.length + 1),

    }
    list.value[index].item.list.push(newOption)
  }
}
function removecheckOption(index, index2) {
  if (mode === 'v1') {
    list.value.fdata[index].item.checkboxlist.splice(index2, 1)
  }
  else if (mode === 'v2') {
    list.value[index].item.checkboxlist.splice(index2, 1)
  }

}
function removetableOption(index, index2) {
  if (mode === 'v1') {
    list.value.fdata[index].item.table.splice(index2, 1)
  }
  else if (mode === 'v2') {
    list.value[index].item.table.splice(index2, 1)
  }

}
function removejcOption(index, index2) {
  if (mode === 'v1') {
    list.value.fdata[index].item.list.splice(index2, 1)
  }
  else if (mode === 'v2') {
    list.value[index].item.list.splice(index2, 1)
  }

}
function checkOptionChange(index, index2) {


  // list.value.fdata[index].item.checkboxlist.forEach(function (radioItem, radioIndex) {
  //   // 在这里处理每个 radioItem
  //   console.log(`处理 radiolist 中的第 ${radioIndex} 个元素: `, radioItem);

  //   list.value.fdata[index].item.checkboxlist[radioIndex].isActive = false;
  // });
  if (mode === 'v1') {
    if (list.value.fdata[index].item.checkboxlist[index2].isActive) {
      list.value.fdata[index].item.checkboxlist[index2].isActive = false;
    }
    else {
      list.value.fdata[index].item.checkboxlist[index2].isActive = true;
      list.value.fdata[index].item.checkboxlist[index2].value = list.value.fdata[index].item.checkboxlist[index2].name
    }
  }
  else if (mode === 'v2') {
    if (list.value[index].item.checkboxlist[index2].isActive) {
      list.value[index].item.checkboxlist[index2].isActive = false;
    }
    else {
      list.value[index].item.checkboxlist[index2].isActive = true;
      list.value[index].item.checkboxlist[index2].value = list.value[index].item.checkboxlist[index2].name
    }
  }


}
const inputText = ref('');
const itemindex = ref(0);
const filetype = ref('');
const emit = defineEmits(['update:childValue', 'end1']);

const change = (index) => {
  console.log(index, value2.value);
  if (value2.value == '占满整行') {
    list.mdata[index].grid = 'w-full';
  } else if (value2.value == '两个一行') {
    list.mdata[index].grid = 'w-1/2';
  } else if (value2.value == '三个一行') {
    list.mdata[index].grid = 'w-1/3';
  }

  listStore.setList(list);
  console.log('list', list);
};

function containsRequired(arr, txt) {
  // console.log('arr', arr)
  // 先做一个简单的类型检查确保传入的是数组
  if (!Array.isArray(arr)) {
    throw new TypeError('传入的参数不是一个数组');
  }

  // 使用 includes 方法检查数组中是否含有 '必填'
  return arr.includes(txt);
}
function removeItemById2(item, index, index2) {
  // const i = this.list[index].value.findIndex(itm => itm.value === item.value)
  // if (i > -1) {
  if (mode === 'v1') {
    list.value.mdata[index].value.splice(index2, 1);
  }
  else if (mode === 'v2') {
    list.value[index].value.splice(index2, 1);
  }
  //listStore.setList(list);
}
function getTimePart(type) {
  const now = new Date(); // 获取当前时间
  let timePart;

  if (type === 'date') {
    // 返回年月日格式，如：2024-06-09
    timePart = now.toISOString().slice(0, 10).replace(/-/g, '-');
  } else if (type === 'time') {
    // 返回时：分格式，如：15:20
    const hours = now.getHours();
    const minutes = now.getMinutes();
    timePart = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
  }

  return timePart;
}
function cdate(index) {
  if (mode === 'v1') {
    if (list.fdata[index].item.setting.autodate) {
      list.fdata[index].item.value = getTimePart('date');
      listStore.setList(list);
    } else {
      list.fdata[index].item.value = '';
      listStore.setList(list);
    }
  }
  else if (mode === 'v2') {
    if (lis[index].item.setting.autodate) {
      list[index].item.value = getTimePart('date');
      listStore.setList(list);
    } else {
      list[index].item.value = '';
      listStore.setList(list);
    }
  }
}
function ctime(index) {
  if (mode === 'v1') {
    if (list.fdata[index].item.setting.autotime) {
      list.fdata[index].item.value = getTimePart('time');
      listStore.setList(list);
    } else {
      list.fdata[index].item.value = '';
      listStore.setList(list);
    }
  }
  else if (mode === 'v2') {
    if (list[index].item.setting.autotime) {
      list[index].item.value = getTimePart('time');
      listStore.setList(list);
    } else {
      list[index].item.value = '';
      listStore.setList(list);
    }
  }
}
const chooseFile = (index, type) => {
  //if (fileInput.value) {
  itemindex.value = index;
  filetype.value = type;
  nextTick(() => {
    console.log('fileInput.value', fileInput.value);
    fileInput.value[0].click();
  });
  //}
};
const chooseFile2 = () => {
  //if (fileInput.value) {

  filetype.value = '图片';
  nextTick(() => {
    console.log('fileInput.value', fileInput2.value);
    fileInput2.value.click();
  });
  //}
};

// 处理文件选择变化
const handleFileChange = (event) => {
  console.log(itemindex.value, filetype.value);
  const files = event.target.files;
  console.log('files', files)
  if (files.length > 0) {
    // 你可以选择处理文件，例如使用 FileReader API 读取文件内容
    const file = files[0];
    fileData.value = file; // 存储选择的文件
    console.log('fileData.value', fileData.value);
    let r = false;
    if (filetype.value === '视频') {
      r = beforeUploadVideoOss(file);
    } else if (filetype.value === '音频') {
      r = beforeUploadAuidoOss(file);
    } else if (filetype.value === '图片' || filetype.value === '滚动') {
      r = beforeUploadImageOss(file);
    } else if (filetype.value === '文件') {
      r = beforeUploadIFileOss(file);
    }
    console.log('r', r);
    if (r) {
      let objName = file.name;
      let fileName = moment().format('YYYY/MM/DD');
      //this.uploadLoading = true
      fileput(`pc/${fileName}/${objName}`, file)
        .then((res) => {
          console.log(res);
          if (res.res.statusCode === 200) {
            if (mode === 'v1') {
              console.log('上传成功', list.value.mdata[itemindex.value]);

              showToast('上传' + type.value + '成功', 'success');
              if (filetype.value === '滚动') {
                list.value.mdata[itemindex.value].value.push(res.url);
              } else {
                list.value.mdata[itemindex.value].value = res.url;
              }
            }
            else if (mode === 'v2') {
              onsole.log('上传成功', list.value[itemindex.value]);

              showToast('上传' + type.value + '成功', 'success');
              if (filetype.value === '滚动') {
                list.value[itemindex.value].value.push(res.url);
              } else {
                list.value[itemindex.value].value = res.url;
              }
            }
            listStore.setList(list);
          } else {
            console.log('上传失败');
          }
        })
        .catch((err) => {
          showToast('上传文件异常:' + err, 'error');
        });
    }
    // 执行上传逻辑
    // ...
  }
};
const handleFileChange2 = (event) => {
  console.log(itemindex.value, filetype.value);
  const files = event.target.files;
  console.log('files', files)
  if (files.length > 0) {
    // 你可以选择处理文件，例如使用 FileReader API 读取文件内容
    const file = files[0];
    fileData.value = file; // 存储选择的文件
    console.log('fileData.value', fileData.value);
    let r = false;
    if (filetype.value === '视频') {
      r = beforeUploadVideoOss(file);
    } else if (filetype.value === '音频') {
      r = beforeUploadAuidoOss(file);
    } else if (filetype.value === '图片' || filetype.value === '滚动') {
      r = beforeUploadImageOss(file);
    } else if (filetype.value === '文件') {
      r = beforeUploadIFileOss(file);
    }
    console.log('r', r);
    if (r) {
      let objName = file.name;
      let fileName = moment().format('YYYY/MM/DD');
      //this.uploadLoading = true
      fileput(`pc/${fileName}/${objName}`, file)
        .then((res) => {
          console.log(res);
          if (res.res.statusCode === 200) {
            console.log('上传成功');

            showToast('上传' + type.value + '成功', 'success');

            console.log('list.card.avatar', list)
            list.value.card.avatar = res.url
          } else {
            console.log('上传失败');
          }
        })
        .catch((err) => {
          showToast('上传文件异常:' + err, 'error');
        });
    }
    // 执行上传逻辑
    // ...
  }
};
// 更新子组件的值时，通过 emit 发出事件
function updateChildValue(event) {
  console.log('event', event);
  //title2.value += event;
  console.log('props.title', inputText.value);
  emit('update:childValue', inputText.value);
}
function removeItemById(item) {
  console.log('removeItemById', list);
  if (mode === 'v1') {
    const index = list.value.mdata.findIndex((itm) => itm.value === item.value);
    if (index > -1) {
      list.value.mdata.splice(index, 1);
    }
  }
  else if (mode === 'v2') {
    const index = list.value.findIndex((itm) => itm.value === item.value);

    if (index > -1) {
      list.value.splice(index, 1);
    }
  }
  //listStore.setList(list);
  //this.$emit('list', this.list)
}
function removeItemById3(index) {
  //const index = list.value.fdata.findIndex((itm) => itm.value === item.value);
  if (mode === 'v1') {
    console.log('index', index)
    if (index > -1) {

      list.value.fdata.splice(index, 1);
    }
  }
  else if (mode === 'v2') {
    console.log('index', index)
    if (index > -1) {

      list.value.splice(index, 1);
    }
  }
  //listStore.setList(list);
}
function duplicateItem(index) {
  if (mode === 'v1') {
    const newItem = _.cloneDeep(list.value.fdata[index]);
    newItem.index = list.value.fdata.length;
    list.value.fdata.push(newItem);
  }
  else if (mode === 'v2') {
    const newItem = _.cloneDeep(list.value[index]);
    newItem.index = list.value.length;
    list.value.push(newItem);
  }
  // 在当前项目之后插入新的项目
}
</script>
<style>
html .location-picker-box {
  width: auto;
  max-width: none;
}

.el-input__inner {
  text-align: center !important;
}

.SZ .el-input-group__append {
  padding: 0 !important;
}

/* 利用穿透，设置input边框隐藏 */

.name .el-input__inner {
  text-align: left !important;
}

.name .el-input__wrapper {
  padding: 0;
  border: none !important;
  box-shadow: none !important;
}

.name ::-webkit-input-placeholder {
  /* WebKit browsers */
  text-align: left;
}

.moveing {
  opacity: 0;
}




/* 如果你的 el-input type 设置成textarea ，就要用这个了 */
.title>>>.el-input__inner {
  resize: none;
  border: 0;

  /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
}
</style>
<style lang="scss" scoped>
:deep(.el-radio-group) {
  display: block;
}

:deep(.el-radio) {
  display: block;
}

/* 利用穿透，设置input边框隐藏 */
.t {
  :deep(.el-input__wrapper) {
    cursor: default;
    background-color: transparent;
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;

    .el-input__inner {
      cursor: default !important;
    }
  }
}
</style>
